@import "reset";
%clear-both{
  clear: both;
}
%clear-left{
  clear: left;
}
%clear-right{
  clear: right;
}
%over-hidden{
  overflow: hidden;
}
%pseudo-reset{
  display: table;
  content: "";
}
%pseudo-before{
  @extend %pseudo-reset;
}
%pseudo-after{
  @extend %pseudo-reset;
  @extend %clear-both;
}
%display-none{
  display: none;
}
%display-block{
  display: block;
}
%box-sizing-border{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
%box-sizing-content{
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
@mixin animation-name($keyframe){
  -webkit-animation-name: #{$keyframe};
  -moz-animation-name: #{$keyframe};
  -o-animation-name: #{$keyframe};
  animation-name: #{$keyframe};
}
@mixin box-resize($type:both){
  resize: #{$type};
  overflow: auto;
}
@mixin border-radius($radius...){
  -webkit-border-radius: #{$radius};
  border-radius: #{$radius};
}
@mixin box-shadow($shadow...){
  -webkit-box-shadow: #{$shadow};
  box-shadow: #{$shadow};
}
@mixin sprite($position){
  background: url(../images/sprite.png) no-repeat #{$position};
}
@mixin opacity($opacity: 0.8){
  opacity: #{$opacity};
  filter: alpha(opacity=#{$opacity});
}
@mixin translateX($translate: -10px){
  -ms-transform: translateX(#{$translate});
  -webkit-transform: translateX(#{$translate});
  transform: translateX(#{$translate});
}
@mixin translateY($translate: -10px){
  -ms-transform: translateY(#{$translate});
  -webkit-transform: translateY(#{$translate});
  transform: translateY(#{$translate});
}
.cf{
  &:before{
    @extend %pseudo-before;
  }
  &:after{
    @extend %pseudo-after;
  }
}
.clear{
  clear: both;
}
.fix{
  @extend .cf;
  width: 940px;
  margin: 0 auto;
}
.wrapper{
  @extend %over-hidden;
  position: relative;
}
%block-indent{
  display: block;
  text-indent: -9900px;
}
%icon-square-32{
  width: 32px;
  height: 32px;
}
%icon-square-48{
  width: 48px;
  height: 48px;
}
.box-register{
  display: none;
  width: 320px;
  .title{
    font: 400 30px "UVN";
    color: #1e327f;
    text-transform: uppercase;
    padding: 5px 18px;
    border-bottom: 1px solid #f0f0f0;
  }
  .data{
    .wpcf7-response-output{
      margin: 0;
      padding: 7px 10px;
      color: #000;
    }
    padding: 13px 20px 17px;
    font-family: "Arial";
    font-size: 12px;
    color: #999;
    .item{
      &.of-text{
        height: 100px;
      }
      margin-bottom: 10px;
      border: 1px solid #e5e5e5;
      min-height: 34px;
      position: relative;
      .txt{
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        margin: 0;
        padding: 8px 12px;
        @extend %box-sizing-border;
      }
      .select{
        border:0;
        background:0;
        padding:0;
        display: block;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
      }
      .span{
        display:block;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        line-height: 34px;
        span{
          padding: 0 12px;
          display: block;
          position: relative;
          &:after{
            @extend %pseudo-reset;
            width: 7px;
            height: 4px;
            @include sprite(-288px -32px);
            position: absolute;
            right: 12px;
            top: 50%;
            margin-top: -2px;
          }
        }
      }
      .wpcf7-not-valid-tip{
        display: none;
      }
    }
    .label{
      margin-bottom: 10px;
    }
    .line{
      @extend .cf;
      img{
        float: left;
        @include border-radius(3px);
        border: 1px solid #e5e5e5;
        width: 100px;
        height: 34px;
      }
      .item{
        float: right;
        width: 160px;
      }
    }
    .btn-register{
      display: block;
      width: 100%;
      height: 44px;
      font: bold 13px/44px "Open Sans";
      color: #fff;
      text-align: center;
      border: none;
      outline: none;
      background: #57a206;
      @include transition();
      &:hover{
        background: #d8691f;
      }
    }
  }
}
.box-slider{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 640px;
  overflow: hidden;
  .over{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/line-1x1.png) repeat 0 0;
    z-index: 20;
  }
  img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  .bs-slice{
    display: block;
    position: absolute;
    z-index: 10;
    height: 100%;
  }
}
.header{
  position: relative;
  z-index: 21;
}
%icon-lang{
  display: block;
  width: 23px;
  height: 16px;
  float: right;
  margin-top: 38px;
  text-indent: -9090px;
}
.header-mid{
  @extend .cf;
  position: relative;
}
.lang_sel_list_vertical{
  float: right;
  margin-top: 38px;
  ul{
    list-style: none;
    li{
      float: left;
      a{
        display: block;
        &.lang_sel_other{
          margin-right: 7px;
        }
        .icl_lang_sel_current{
          text-indent: -9090px;
          display: block;
        }
      }
    }
  }
}
.header-top{
  @extend .cf;
  position: relative;
  .logo{
    @extend %block-indent;
    width: 154px;
    height:26px;
    float: left;
    margin-top: 28px;
    @include sprite(-96px 0);
  }
  .nav-main{
    @include transition();
    float: right;
    margin-top: 31px;
    margin-right: 30px;
    li{
      float: left;
      margin-right: 25px;
      &.current-menu-item{
        a{
          border-bottom-color: #fff;
          &:hover{
            color: #d8691f;
            border-bottom-color: #d8691f;
          }
        }
      }
      a{
        display: block;
        font: 400 18px "UVN";
        color: #fff;
        text-transform: uppercase;
        padding-bottom: 9px;
        border-bottom: 1px solid transparent;
        &:hover{
          color: #d8691f;
          border-bottom-color: #d8691f;
        }
      }
    }
  }
  .box-find{
    z-index: 15;
    right: 58px;
    position: absolute;
    width: 28px;
    height: 28px;
    top: 33px;
    overflow: hidden;
    @include transition(width,1s,ease);
    @include border-radius(14px);
    .txt{
      @extend %display-none;
      position: absolute;
      left: 0;
      padding: 2px 10px;
      width: 160px;
      border: none;
      outline: none;
      background: transparent;
      top: 5px;
    }
    .btn-find{
      position: absolute;
      right: 6px;
      top: 6px;
      border: none;
      outline: none;
      width: 16px;
      height: 16px;
      @include sprite(-64px 0);
      @include border-radius(50%);
      text-indent: -9090px;
      &:hover{
        background-position: -80px 0;
      }
    }
    &.of-show{
      background: #2b4282;
      width: 210px;
      .txt{
        @extend %display-block;
      }
    }
  }
}
.header-bot{
  @extend .cf;
  .title{
    font: 400 60px "RCL";
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 30px;
  }
  .nav-service{
    margin-left: -20px;
    list-style: none;
    li{
      float: left;
      width: 300px;
      margin-left: 20px;
      margin-bottom: 20px;
      a{
        display: table;
        width: 100%;
        background: url(../images/line-1x1-6.png) repeat 0 0;
        position: relative;
        height: 80px;
        .number{
          display: table-cell;
          vertical-align: middle;
          width: 60px;
          color: #fc3;
          font: 400 48px "UVN";
          text-align: center;
        }
        .text{
          display: table-cell;
          vertical-align: middle;
          padding-right: 40px;
          font: 400 18px "UVN";
          color: #fff;
          .arrow{
            content: "";
            display: inline-block;
            width: 8px;
            height: 12px;
            @include sprite(-112px -32px);
          }
        }
      }
    }
  }
  .summary{
    float: left;
    width: 460px;
    font-family: "RCL";
    color: #fff;
    h2{
      font-size: 60px;
      text-transform: uppercase;
    }
    p{
      margin-bottom: 30px;
      margin-top: 30px;
      font-size: 14px;
    }
    a{
      display: inline-block;
      position: relative;
      padding-left: 15px;
      color: #fff;
      text-transform: uppercase;
      font: 600 13px "Open Sans";
      &:after{
        @include transition();
        @extend %pseudo-reset;
        width: 8px;
        height: 12px;
        @include sprite(-112px -32px);
        position: absolute;
        left: 0;
        top: 3px;
      }
      &:hover{
        color: #d8691f;
        &:after{
          background-position: -96px -32px;
        }
      }
    }
  }
  .introduce{
    float: right;
    width: 300px;
    .video{
      @extend %display-block;
      position: relative;
      height: 133px;
      &:after{
        @extend %pseudo-reset;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 82px;
        height: 82px;
        margin: -41px 0 0 -41px;
        @include sprite(0 -16px);

      }
    }
    .register{
      background: #fff;
      margin-top: 12px;
      padding-bottom: 22px;
      color: #071c58;
      .title{
        color: #071c58;
        font: 400 24px "UVN";
        border-bottom: 1px solid #e4e4e4;
        padding: 12px 20px;
        text-transform: uppercase;
        margin-bottom: 20px;
      }
      .line{
        position: relative;
        padding: 0 20px 10px 50px;
        &:after{
          @extend %pseudo-reset;
          width: 24px;
          height: 24px;
          position: absolute;
          top: 0;
          left: 16px;
        }
        &.line-1{
          font: 400 13px "RCR";
          &:after{
            @include sprite(-128px -32px);
          }
        }
        &.line-2{
          font: 400 18px "RCB";
          &:after{
            @include sprite(-152px -32px);
          }
        }
      }
      .btn{
        @extend %display-block;
        height: 44px;
        font: 800 13px/44px "Open Sans";
        color: #fff;
        text-transform: uppercase;
        margin-left: 20px;
        margin-right: 20px;
        background: #57a206;
        text-align: center;
        &:hover{
          background: #d8691f;
        }
      }
    }
  }
}
%block-option{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.homepage{
  .header{
    height: 640px;
    .header-top{
      height: 230px;
    }
  }
}
.header-mid{
  .introduce{
    width: 700px;
    float: left;
    color: #fff;
    h2{
      font: 400 60px/70px "RCL";
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    p{
      font: 400 14px "RCR";
    }
  }
  .option{
    position: absolute;
    right: 0;
    bottom: 5px;
    width: 160px;
    height: 41px;
    border: 1px solid #fff;
    @include border-radius(2px);
    .select{
      border:0;
      background:0;
      padding:0;
      @extend %block-option;
    }
    .span{
      @extend %block-option;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: uppercase;
      font: bold 13px/41px "Open Sans";
      color: #fff;
      text-align: center;
      span{
        padding: 0 32px 0 5px;
        display: inline;
        position: relative;
        &:after{
          @extend %pseudo-reset;
          width: 11px;
          height: 8px;
          @include sprite(-208px -32px);
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -4px;
        }
      }
    }
  }
}
%link-nav-hover{
  color: #071c58;
}
.nav-paging{
  text-align: center;
  list-style: none;
  margin-bottom: 40px;
  margin-top: 20px;
  font: 400 30px "UVN";
  li{
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    a{
      display: block;
      color: #999;
      &:hover{
        @extend %link-nav-hover;
      }
      &.current{
        @extend %link-nav-hover;
      }
    }
  }
}
.box-article{
  padding: 55px 0;
  .title{
    font: 400 60px "RCL";
    color: #071c58;
    text-transform: uppercase;
  }
  .data{
    margin-left: -20px;
    @extend .cf;
    .item{
      float: left;
      width: 300px;
      margin-left: 20px;
      margin-bottom: 30px;
      &:nth-child(3n+1){
        clear: left;
      }
      h3{
        margin-top: 15px;
        margin-bottom: 5px;
        a{
          font: 400 18px "RCR";
          color: #071c58;
          text-transform: uppercase;
          &:hover{
            color: #d8691f;
          }
        }
      }
      time{
        color: #999;
        font: bold 12px "Arial";
      }
      p{
        color: #666;
        margin-top: 5px;
        font: 400 13px "RCR";
      }
    }
  }
}
%bg-tye-1{
  background: url(../images/bg-type-1.jpg) repeat-x 50% 0;
}
%bg-tye-2{
  background: url(../images/bg-type-2.jpg) repeat-x 50% 0;
}
.page-education{
  .header{
    min-height: 640px; 
    .header-top{
      height: 330px;
    }
  }
}
.page-contact{
  .header{
    @extend %bg-tye-2;
    height: 348px;
    .header-top{
      height: 200px;
    }
  }
}
.page-faculty{
  .header{
    @extend %bg-tye-1;
    height: 350px;
    .header-top{
      height: 200px;
    }
  }
}
.page-news{
  .header{
    @extend %bg-tye-1;
    height: 128px;
  }
}
.box-contact{
  .item{
    @extend .cf;
    padding-bottom: 5px;
    padding-top: 30px;
    border-bottom: 1px solid #f0f0f0;
    &:last-child{
      border-bottom: none;
    }
    .location{
      float: left;
      width: 120px;
      margin-top: 15px;
    }
    .data{
      float: left;
      width: 500px;
      h3{
        font: 400 24px "UVN";
        color: #071c58;
        text-transform: uppercase;
      }
      p{
        font: 400 14px "RCR";
        color: #666;
        margin-bottom: 20px;
      }
    }
  }
}
.box-utility{
  @extend .cf;
  padding: 20px 0;
  color: #999;
  .nav-breadcrumb{
    list-style: none;
    font: bold 14px "Open Sans";
    text-transform: uppercase;    
    li{
      float: left;
      margin-right: 4px;
      a{
        color: #999;
        &:hover{
          @extend %link-nav-hover;
        }
      }
    }
  }
  .time{
    float: right;
    font: bold 12px "Arial";
  }
}
.box-care{
  @extend .cf;
  .col-left{
    float: left;
    width: 300px;
    position: relative;
    min-height: 40px;
    .relate{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      .head{
        font: 400 24px "UVN";
        color: #071c58;
        text-transform: uppercase;
        margin-bottom: 10px;
      }
      .news-other{
        list-style: none;
        li{
          border-top: 1px solid #ebebeb;
          a{
            display: block;
            padding: 8px 0 8px 20px;
            position: relative;
            color: #333;
            font: 400 14px "RCR";
            &:after{
              @extend %pseudo-reset;
              width: 8px;
              height: 12px;
              position: absolute;
              left: 0;
              top: 50%;
              margin-top: -6px;
              @include sprite(-96px -48px);
            }
            &:hover{
              color: #d8691f;
              &:after{
                @include sprite(-96px -32px);
              }
            }
          }
        }
      }
    }
  }
  .col-right{
    float: right;
    width: 610px;
    .share{
      @extend .cf;
      .item{
        float: left;
        margin-right: 10px;
        max-width: 120px;
      }
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .tags{
      color: #999;
      span{
        color: #071c58;
        text-transform: uppercase;
        font: 400 18px "UVN";
        display: inline-block;
        margin-right: 10px;
      }
      a{
        font: 400 14px "Arial";
        color: #999;
        &:hover{
          color: #d8691f;
        }
      }
    }
  }
}
.box-news{
  @extend .cf;
  .title{
    float: left;
    width: 100%;
    font: 400 60px "RCL";
    color: #071c58;
    margin-bottom: 20px;
  }
  .col-left{
    float: left;
    width: 300px;
    position: relative;
    .focus{
      font: 400 24px "RCL";
      color: #071c58;
      padding-top: 15px;
      border-top: 2px solid #071c58;
      margin-bottom: 15px;
      margin-top: 15px;
    }
  }
  .col-right{
    float: right;
    width: 610px;
    font: 400 14px/24px "RCR";
    p{
      padding: 8px 0;
    }
    img{
      max-width: 100%;
    }
    em,i{
      font-style: italic;
    }
    h1{
      font-size: 2em;
      margin-bottom: 0.67em;
      margin-top: 0.67em;
    }
    h2{
      font-size: 1.5em;
      margin-bottom: 0.83em;
      margin-top: 0.83em;
    }
    h3{
      font-size: 1.17em;
      margin-bottom: 1em;
      margin-top: 1em;
    }
    h4{
      margin-bottom: 1em;
      margin-top: 1em;
    }
    h5{
      font-size: 0.83em;
      margin-bottom: 1.67em;
      margin-top: 1.67em;
    }
    h6{
      font-size: 0.67em;
      margin-bottom: 2.33em;
      margin-top: 2.33em;
    }
    ul,ol{
      margin-left: 40px;
      margin-top: 1em;
      margin-bottom: 1em;
    }
  }
}

.box-courses{
  padding: 55px 0 62px;
  .title{
    font: 600 16px "Open Sans";
    color: #999;
    text-transform: uppercase;
  }
  .introduce{
    margin-bottom: 45px;
    width: 560px;
    h3{
      font: 400 60px "RCL";
      color: #071c58;
      text-transform: uppercase;
    }
    p{
      margin-top: 10px;
      font: 400 14px "RCR";
      color: #666;
    }
  }
  .data{
    @extend .cf;
    .item{
      float: left;
      width: 235px;
      height: 225px;
      position: relative;
      overflow: hidden;
      h4{
        position: absolute;
        left: 0;
        top: 65px;
        width: 100%;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        span{
          @extend %display-block;
          &.text{
            font: 500 14px "Open Sans";
          }
          &.object{
            font: 400 30px "UVN";
          }
        }
        z-index: 10;
      }
      a{
        @extend %display-block;
        width: 124px;
        height: 32px;
        text-align: center;
        border: 2px solid #fff;
        position: absolute;
        left: 55px;
        bottom: 26px;
        font: 800 13px/32px "Open Sans";
        color: #fff;
        z-index: 10;
        &:hover{
          border-color: #d8691f;
          color: #d8691f;
        }
      }
      &:after{
        @extend %pseudo-reset;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
      &.item-1{
        &:after{
          background: url(../images/line-1x1-2.png) repeat 0 0;
        }
      }
      &.item-2{
        &:after{
          background: url(../images/line-1x1-3.png) repeat 0 0;
        }
      }
      &.item-3{
        &:after{
          background: url(../images/line-1x1-4.png) repeat 0 0;
        }
      }
      &.item-4{
        &:after{
          background: url(../images/line-1x1-5.png) repeat 0 0;
        }
      }
    }
  }
}
.box-faculty{
  padding: 52px 0;
  background: #2b4282;
  .intro{
    @extend .cf;
    .image{
      float: left;
      width: 480px;
      img{
        float: left;
        @include border-radius(3px);
        margin: 9px 20px 9px 0;
      }
    }
  }
  .text{
    float: right;
    width: 400px;
    color: #fff;
    h3{
      font: 400 60px "RCL";
      text-transform: uppercase;
    }
    p{
      font: 400 14px "RCR";
      margin-top: 20px;
      margin-bottom: 25px;
    }
    a{
      display: inline-block;
      border: 2px solid #fff;
      font: 800 14px "Open Sans";
      color: #fff;
      padding: 10px 42px;
      text-transform: uppercase;
      &:hover{
        border-color: #d8691f;
        color: #d8691f;
      }
    }
  }
}
.box-list-faculty{
  @extend .cf;
  margin-top: 48px;
  margin-left: -20px;
  .item{
    float: left;
    width: 220px;
    text-align: center;
    margin: 0 0 40px 20px;
    .thumb{
      @include border-radius(3px);
      background: #f2f2f2;
      img{
        vertical-align: middle;
      }
    }
    h3{
      color: #253d82;
      text-transform: uppercase;
      font: 400 18px "RCL";
      margin-top: 15px;
      margin-bottom: 10px;
    }
    &:nth-child(4n+1){
      clear: left;
    }
  }
}
.box-mix{
  padding: 55px 0;
  .title{
    @extend .cf;
    margin-bottom: 20px;
    span{
      font: 400 24px "UVN";
      color: #193583;
      text-transform: uppercase;
      float: left;
    }
    a{
      float: right;
      margin-top: 15px;
      color: #999;
      font: 400 13px "RCR";
      text-transform: none;
      &:hover{
        color: #d8691f;
      }
    }
  }
  .about-us{
    float: left;
    width: 540px;
    .about{
      padding-left: 50px;
      position: relative;
      &:after{
        @extend %pseudo-reset;
        width: 32px;
        height: 24px;
        @include sprite(-176px -32px);
        position: absolute;
        left: 0;
        top: 0;
      }
      .say{
        font: 400 14px "RCR";
      }
      .name{
        margin-top: 10px;
        font: 400 18px "UVN";
        color: #193583;
        text-transform: uppercase;
      }
      .job{
        color: #999;
        font: 400 14px "RCR";
      }
    }
  }
  .news-us{
    float: right;
    width: 320px;
    ul{
      list-style: none;
      li{
        position: relative;
        border-bottom: 1px solid #e5e5e5;
        padding: 0 0 10px 20px;
        margin-bottom: 10px;
        &:after{
          @extend %pseudo-reset;
          width: 8px;
          height: 12px;
          @include sprite(-96px -48px);
          position: absolute;
          left: 0;
          top: 2px;
        }
        a{
          color: #333;
          font: 400 14px "RCR";
          &:hover{
            color: #d8691f;
          }
        }
        &:last-child{
          border-bottom: none;
        }
      }
    }
  }
}
.nav-aside{
  li{
    a{
      color: #999;
      display: block;
      font: 400 14px/41px "RCR";
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      &:hover{
        color: #1b3564;
        @include translateX(10px);
      }
      &.active{
        color: #1b3564;
        font: 400 14px/40px "RCB";
        &:hover{

        }
        &:after{
          @extend %pseudo-reset;
          width: 9px;
          height: 13px;
          @include sprite(-112px -48px);
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -5px;
        }
      }
    }
    border-bottom: 1px solid #e8e8e8;
    &:last-child{
      border-bottom: none;
    }
  }
}
.box-detail{
  padding-left: 40px;
  font: 400 14px/24px "RCR";
  .title{
    font-size: 30px;
    font-weight: normal;
    color: #1b3564;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 20px;
  }
  p{
    padding: 8px 0;
  }
  img{
    max-width: 100%;
  }
  em,i{
    font-style: italic;
  }
  h1{
    font-size: 2em;
    margin-bottom: 0.67em;
    margin-top: 0.67em;
  }
  h2{
    font-size: 1.5em;
    margin-bottom: 0.83em;
    margin-top: 0.83em;
  }
  h3{
    font-size: 1.17em;
    margin-bottom: 1em;
    margin-top: 1em;
  }
  h4{
    margin-bottom: 1em;
    margin-top: 1em;
  }
  h5{
    font-size: 0.83em;
    margin-bottom: 1.67em;
    margin-top: 1.67em;
  }
  h6{
    font-size: 0.67em;
    margin-bottom: 2.33em;
    margin-top: 2.33em;
  }
  ul,ol{
    margin-left: 40px;
    margin-top: 1em;
    margin-bottom: 1em;
  }
}
.box-partner{
  margin-bottom: 55px;
}
.layout{
  @extend .cf;
  padding-top: 20px;
  padding-bottom: 20px;
  .layout-left{
    float: left;
    width: 200px;
    display: inline;
  }
  .layout-right{
    float: right;
    width: 720px;
    display: inline;
    border-left: 1px solid #e8e8e8;
  }
}
.owl-height {
  @include transition(height,500ms,ease-in-out);
}
%no-select{
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
.animated{
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1;
  .owl-animated-in {
    z-index: 0;
  }
  .owl-animated-out {
    z-index: 1;
  }
  .fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
  }
  .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    &:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }
  }
  .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
  .owl-controls{
    .owl-nav{
      .owl-prev{
        /*@extend %ovl-nav;*/
        @extend %no-select;
      }
      .owl-next{
        /*@extend %ovl-nav;*/
        @extend %no-select;
      }
    }
    .owl-dot{
      @extend %no-select;
    }
  }
  &.owl-loaded {
    display: block;
  }
  &.owl-loading {
    opacity: 0;
    display: block;
  }
  &.owl-hidden {
    opacity: 0;
  }
  .owl-refresh{
    .owl-item{
      display: none;
    }
  }
  .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    @extend %no-select;
    .owl-lazy {
      opacity: 0;
      @include transition(opacity,400ms,ease);
      img {
        transform-style: preserve-3d;
      }
    }
  }
  img {
    display: block;
    width: 100%;
    -webkit-transform-style: preserve-3d;
  }
  &.owl-text-select-on{
    .owl-item {
      -webkit-user-select: auto;
      -moz-user-select: auto;
      -ms-user-select: auto;
      user-select: auto;
    }
  }
  .owl-grab {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -o-grab;
    cursor: -ms-grab;
    cursor: grab;
  }
  &.owl-rtl {
    direction: rtl;
    .owl-item {
      float: right;
    }
  }
  .no-js &{
    display: block;
  }
  .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000;
  }
  .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    //  background: url("owl.video.play.png") no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transition: scale 100ms ease;
    -moz-transition: scale 100ms ease;
    -ms-transition: scale 100ms ease;
    -o-transition: scale 100ms ease;
    transition: scale 100ms ease;
    &:hover {
      -webkit-transition: scale(1.3, 1.3);
      -moz-transition: scale(1.3, 1.3);
      -ms-transition: scale(1.3, 1.3);
      -o-transition: scale(1.3, 1.3);
      transition: scale(1.3, 1.3);
    }
  }
  .owl-video-playin{
    .owl-video-tn{
      display: none;
    }
    .owl-video-play-icon{
      display: none;
    }
  }
  .owl-video-tn{
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    @include transition(opacity,400ms,ease);
  }
  .owl-video-frame {
    position: relative;
    z-index: 1;
  }
}
.footer{
  padding: 40px 0 20px;
  background: #071c58;
  color: #fff;
  .columns{
    float: left;
    width: 220px;
    margin-right: 20px;
    &.last{
      margin-right: 0;
    }
    .title{
      font: 400 18px "UVN";
      text-transform: uppercase;
      margin-bottom: 15px;
    }
    p{
      font: 400 12px/16px "RCR";
      margin-bottom: 10px;
      a{
        color: #fff;
        &:hover{
          text-decoration: underline;
        }
      }
    }
    .nav-footer{
      list-style: none;
      li{
        position: relative;
        padding-left: 14px;
        padding-bottom: 5px;
        &:after{
          @extend %pseudo-reset;
          width: 4px;
          height: 4px;
          background: #fff;
          position: absolute;
          left: 0;
          top: 7px;
        }
        a{
          font: 400 13px "RCR";
          color: #fff;
          &:hover{
            color: #d8691f;
          }
        }
      }
    }
    input{
      display: block;
      @extend %box-sizing-border;
      width: 100%;
      border: none;
      outline: none;
      &.txt{
        padding: 8px 12px;
        background: #fff;
        margin-bottom: 9px;
      }
      &.btn{
        background: #57a206;
        @include transition();
        font: 800 13px "Open Sans";
        color: #fff;
        height: 36px;
        text-align: center;
        line-height: 36px;
        text-transform: uppercase;
        margin-bottom: 10px;
        &:hover{
          background: #d8691f;
        }
      }
    }
    %background-hover-social{
      background-color: #d8691f;
    }
    %background-link-social{
      background-color: #17327e;
    }
    .nav-social{
      @extend .cf;
      list-style: none;
      li{
        float: left;
        margin-right: 2px;
        @include transition();
        @extend %background-link-social;
        &:hover{
          @extend %background-hover-social;
        }
        a{
          @extend %block-indent;
          width: 40px;
          height: 40px;
          &.icon-facebook{
            @include sprite(-96px -64px);
          }
          &.icon-twitter{
            @include sprite(-144px -64px);
          }
          &.icon-youtube{
            @include sprite(-192px -64px);
          }
        }
      }
    }
  }
  .copyright{
    float: left;
    width: 100%;
    border-top: 1px solid #17327e;
    margin-top: 55px;
    padding-top: 25px;
    font-size: 12px;
  }
}
.main-left{
  float: left;
  width: 620px;
}
.main-right{
  float: right;
  width: 300px;
  .register{
    margin-bottom: 30px;
    background: #071c58;
    margin-top: 12px;
    padding-bottom: 22px;
    color: #fff;
    .title{
      font: 400 24px "UVN";
      border-bottom: 1px solid #283d77;
      padding: 12px 20px;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    .line{
      position: relative;
      padding: 0 20px 10px 50px;
      &:after{
        @extend %pseudo-reset;
        width: 24px;
        height: 24px;
        position: absolute;
        top: 0;
        left: 16px;
      }
      &.line-1{
        font: 400 13px "RCR";
        &:after{
          @include sprite(-256px -32px);
        }
      }
      &.line-2{
        font: 400 18px "RCB";
        &:after{
          @include sprite(-256px -64px);
        }
      }
    }
    .btn{
      @extend %display-block;
      height: 44px;
      font: 800 13px/44px "Open Sans";
      color: #fff;
      text-transform: uppercase;
      margin-left: 20px;
      margin-right: 20px;
      background: #57a206;
      text-align: center;
      margin-top: 10px;
      &:hover{
        background: #d8691f;
      }
    }
  }
  .map{
    position: relative;
    height: 126px;
    &:after{
      @extend %pseudo-reset;
      width: 100%;
      height: 100%;
      background: url(../images/line-1x1.png) repeat 0 0;
      position: absolute;
      left: 0;
      top: 0;
    }
    .btn-map{
      width: 156px;
      height: 38px;
      border: 2px solid #fff;
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      text-align: center;
      margin: -19px 0 0 -78px;
      font: 800 13px/38px "Open Sans";
      color: #fff;
      text-transform: uppercase;
      &:hover{
        border-color: #d8691f;
        color: #d8691f;
      }
      z-index: 9;
    }
  }
}
.box-form{
  padding: 40px 0;
  background: #f3f3f3;
  .title{
    text-align: center;
    font: 400 24px "RCR";
    color: #071c58;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .notice{
    font: 400 14px "RCR";
    text-align: center;
    color: #666;
    width: 660px;
    margin: 0 auto;
    padding-bottom: 40px;
  }
  .data{
    width: 690px;
    margin: 0 auto;
    @extend .cf;
    p{
      width: 100%;
      margin: 0;
    }
    .txt{
      float: left;
      margin-left: 10px;
      margin-bottom: 12px;
      border: none;
      background: #fff;
      padding: 10px 15px;
      display: block;
      outline: none;
      &.wpcf7-not-valid{
        background: #F9E5E5;
      }
    }
    .wpcf7-not-valid-tip{
      display: none;
    }
    input.txt{
      width: 190px;
    }
    textarea.txt{
      clear: left;
      width: 650px;
      height: 120px;
      margin-bottom: 18px;
    }
    .btn-submit{
      @include transition();
      display: block;
      width: 220px;
      height: 44px;
      margin: 18px auto;
      font: 800 13px "Open Sans";
      outline: none;
      border: none;
      background: #57a206;
      color: #fff;
      text-transform: uppercase;
      &:hover{
        background: #d8691f;
      }
    }
  }
}
.box-aside{
  @extend .cf;
  .title{
    margin-bottom: 20px;
    float: left;
    width: 100%;
    .text{
      text-transform: uppercase;
      font: 400 24px "UVN";
      color: #071c58;
      float: left;
    }
    a{
      float: right;
      font: 400 13px "Arial";
      color: #999;
      margin-top: 18px;
      &:hover{
        color: #d8691f;
      }
    }
  }
  .item{
    clear: left;
    position: relative;
    margin-bottom: 1px;
    height: 120px;
    overflow: hidden;
    .thumb{
      display: block;
      height: 120px;
      &:after{
        @extend %pseudo-reset;
        width: 100%;
        height: 100%;
        background: url(../images/line-1x1.png) repeat 0 0;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    h3{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      a{
        display: table-cell;
        padding: 10px 50px 10px 15px;
        position: relative;
        font: 400 14px "RCR";
        vertical-align: middle;
        width: 280px;
        height: 38px;
        color: #fff;
        &:after{
          @extend %pseudo-reset;
          width: 14px;
          height: 23px;
          position: absolute;
          right: 15px;
          top: 50%;
          margin-top: -12px;
          @include sprite(-288px 0);
        }
        &:hover{
          color: #d8691f;
        }
      }
    }
  }
}
%font-education{
  font: 400 14px/24px "RCR";
  ul{
    margin-left: 35px;
  }
}
.box-customer{
  .title{
    font: 400 24px "UVN";
    color: #071c58;
    text-transform: uppercase;
    padding-top: 10px;
    border-top: 2px solid #071c58;
    margin-bottom: 10px;
  }
  .data{
    @extend .cf;
    margin-left: -13px;
    .item{
      float: left;
      width: 143px;
      height: 78px;
      margin-left: 13px;
      margin-bottom: 13px;
      border: 1px solid #ebebeb;
      &:hover{
        border-color: #e0e0e0;
      }
    }
  }
}
.box-education{
  margin-top: 40px;
  .description{
    @extend %font-education;
  }
  .btn-join{
    display: block;
    width: 260px;
    height: 50px;
    font: 800 16px/50px "Open Sans";
    margin: 45px auto;
    color: #fff;
    text-align: center;
    background: #57a206;
    &:hover{
      background: #d8691f;
    }
  }
  .item{
    h3{
      font: 400 18px/24px "RCB";
      padding-bottom: 12px;
      padding-top: 12px;
      margin-bottom: 20px;
      border-bottom: 2px solid #e9e9e9;
      position: relative;
      &:after{
        @extend %pseudo-reset;
        width: 13px;
        height: 9px;
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -5px;
        @include sprite(-256px -16px);
      }
    }
    &.of-show{
      h3{
        &:after{
          @include sprite(-256px 0);
        }
      }
    }
    .content{
      display: none;
      @extend %font-education;
      p{
        margin-bottom: 25px;
      }
      ul{
        margin-left: 18px; 
      }
    }
  }
}
@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounce-in {
  @include animation-name(bounceIn);
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fade-in-up {
  @include animation-name(fadeInUp);
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  @include animation-name(pulse);
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fade-in-left {
  @include animation-name(fadeInLeft);
}
@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotate-left {
  @include animation-name(rotateInDownLeft);
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fade-in-right {
  @include animation-name(fadeInRight);
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fade-in-down {
  @include animation-name(fadeInDown);
}